<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>河南省高亮显示</title>
    <style>
        html, body, #map {
            margin: 0;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<!-- TODO 第一步： 引入高德地图api插件-->
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=a335cc8ac3803361df25094aadc62a53&plugin=AMap.DistrictSearch"></script>
<script type="text/javascript">

    //TODO 第二步：初始化地图对象，加载地图
    var map = new AMap.Map("map", {
        resizeEnable: true,
        center: [116.397428, 39.90923],//地图中心点
        zoom: 10 //地图显示的缩放级别
    });

    //TODO 第三步：初始化边界查询组件
    var district = new AMap.DistrictSearch({
        subdistrict: 0,   //获取边界不需要返回下级行政区
        extensions: 'all',  //返回行政区边界坐标组等具体信息
        level: 'province'  //查询行政级别为 省
    });

    // TODO 第四步: 查询出行政区域信息并且高亮显示
    drawBounds();

    function drawBounds() {
        //查询省信息并且高亮显示
        district.search("河南省", function (status, result) {
            var bounds = result.districtList[0].boundaries; // 获取边界信息
            // 绘制边界
            for (var i = 0, l = bounds.length; i < l; i++) {
                // 高亮显示的区域设置
                var polygon = new AMap.Polygon({
                    strokeWeight: 1,
                    path: bounds[i], // 边界
                    fillOpacity: 0.4,
                    fillColor: '#E3D4F2',　// 高亮(中间的填充色)
                    strokeColor: '#0091ea' // 边界的颜色
                });
                
                map.add(polygon)
                map.setFitView(polygon);//视口自适应
            }
        });
    }
</script>
</body>
</html>